<template>
  <div>
    <div class="header-tool">
      <a-button
        class="mr10"
        type="primary"
        @click="handerSearch()"
      >
        刷新
      </a-button>
    </div>

    <a-table
    

      :row-key="(record) => record.complaint_id"
      :columns="columns"
      :dataSource="listData.list"
      :pagination="
        isObject(pagination)
          ? {
              showQuickJumper: true,
              total: pagination.total,
              current: pagination.current,
              pageSize: pagination.pageSize,
              showTotal: (total) => `共计 ${pagination.total} 条`
            }
          : false
      "
      @change="handleTableChange"
    >
    <!-- <template #expandIcon="row">
    <UpOutlined  v-if="row.expanded" @click="getRows(row, $event)" />
      <DownOutlined v-else @click="getRows(row, $event)" />
   
      </template> -->
      <template #expandedRowRender="{ record }">
        <div class="expend-reply"> 
          <div class='reply-table'>
          <div class='reply-table-row' v-for="item in record?.Replies" >

         
          <div class="user-info">
            <img
              class="user-info-avatar"
              :src="item?.Admin?.avatar"
              alt=""
            />
            <div class="user-name">
              <div class="name">{{ item?.Admin?.admin_name }}</div>

              <div class="name">{{ item?.created_at }}</div>
            </div>
          </div>
          <div class="content">
            <span >{{ item?.content }}</span>
            <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handleDel(item)"
            >
            <a class="del-btn">删除</a>
          </a-popconfirm>
          </div>
        </div>
     
        <div class='reply-box'>
          <div>回复：</div>
          <div style="width:600px">
            
          <a-textarea
         :auto-size="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入内容"
            v-model:value="record.replyTextarea"
          ></a-textarea>
          
        </div>
          <a-button
            style="margin-left: 20px"
            type="primary"
            @click="replySave(record)"
          >
            回 复
          </a-button>
        </div>
        
       
        </div>
      </div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'imgs'">
          <a-image-preview-group v-if="record?.imgs">
            <template v-for="item in record?.imgs?.split(',')">
              <a-image
                style="width: 50px; height: 50px; margin-right: 10px"
                :src="item"
              />
            </template>
          </a-image-preview-group>
        </template>
        <template v-if="column.dataIndex === 'User'">
          <div
            class="user-info"
            @click="handleEdit(record)"
          >
            <img
              class="user-info-avatar"
              :src="record?.User?.avatar"
              alt=""
            />
            <div class="user-name">
              <div class="name">{{ record?.User?.user_name }}</div>
              <div class="phone">IP归属地：{{ record.area }}</div>
              <!-- <br /> -->
              <a
                @click="stopNoSpeak(record)"
                v-if="record?.User?.BlackList"
              >
                解除禁言
              </a>
              <a
                @click="stopSpeak(record)"
                v-else
              >
                禁言
              </a>
            </div>
          </div>
        </template>

        <template v-if="column.dataIndex === 'is_on'">
          <a-switch
            @change="changeDel($event, record)"
            checked-children="是"
            un-checked-children="否"
            v-model:checked="record.is_on"
          />
        </template>
        <template v-if="column.dataIndex === 'Replies'">
          <a-tag v-if="record.Replies.length == 0">未回复</a-tag>
          <a-tag
            type="success"
            v-if="record.Replies.length > 0"
          >
            已回复
          </a-tag>
          <!-- <br /> -->
          <!-- <a
            v-if="record.Replies.length > 0"
            @click="ViewReplies(record)"
          >
            查看
          </a> -->
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a-popconfirm
              class="gap-popconfirm"
              title="确定删除吗？"
              ok-text="确认"
              cancel-text="取消"
              @confirm="handlerDelete(record)"
            >
              <a>删除</a>
            </a-popconfirm>

            <!-- <a-divider type="vertical" />
            <a @click="replyVisible(record)">回复</a> -->
          </span>
        </template>
      </template>
    </a-table>
  </div>

  <feedbackAdd
    ref="feedbackAddEle"
    @success="handlerGetListData"
  ></feedbackAdd>
  <!-- 查看回复 -->
  <Replies
    ref="RepliesEle"
    @success="handlerGetListData"
  >
    >
  </Replies>
</template>

<script setup>
import { UpOutlined,DownOutlined } from '@ant-design/icons-vue';
  import feedbackAdd from './feedbackAdd.vue'
  import Replies from './Replies.vue'
  import { isObject } from 'lodash-es'
  import { ref, onMounted, reactive } from 'vue'
  import { message } from 'ant-design-vue'
  import {
    adviceList,
    DelAdvices,
    replyAdvices,
    complaintOn,
    complaintUnblacklist,
    omplaintBlacklist,replyDelete 
  } from '@/api/index.js'
  const RepliesEle = ref(null)
  const feedbackAddEle = ref(null)
  const columns = [
  {
      title: '留言用户',
      dataIndex: 'User',
      width: '300px'
    }, 
 
    {
      title: '留言内容',
      dataIndex: 'content',
      width: '300px',
      ellipsis: true
    },
    {
      title: '附加图片',
      dataIndex: 'imgs',
      width: '200px'
    },

    {
      title: '是否展示',
      dataIndex: 'is_on',
      width: '80px'
    },
    {
      title: '是否回复',
      dataIndex: 'Replies',
      width: '120px'
    },

    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: '100px'
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '200px',
      fixed: 'right'
    }
  ]
  const replySave = (row) => {
    if (!row.replyTextarea) {
      return message.error('请输入回复内容')
    }
    replyAdvices({
      content: row.replyTextarea,
      complaint_id: row.complaint_id
      // picture: ''
    }).then((res) => {
      if (res.errorCode) {
        message.error(res.msg)
        return
      }
      row.replyTextarea = ''
      handlerGetListData()
      message.success('回复成功')
       
    })
  }
  const ViewReplies = (row) => {
    RepliesEle.value.init(row)
  }
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })

  const listData = ref({
    list: []
  })
  const replyTextarea = ref('')
  const listLoading = ref(true)

  const stopSpeak = (row) => {
    omplaintBlacklist({
      uid: row.uid
    }).then((res) => {
      if (res.errorCode) {
        return message.warn(res.msg)
      }
      handlerGetListData()
      message.success('操作成功')
    })
  }
  const handleDel = (row) => {
    replyDelete({
      reply_id: row.reply_id
    }).then(res=>{
      if (res.errorCode) {
        message.error(res.msg)
        return
      }
      handlerGetListData()
      message.success('删除成功')
      
    })


  }

  const stopNoSpeak = (row) => {
    complaintUnblacklist({ uid: row.uid }).then((res) => {
      if (res.errorCode) {
        return message.warn(res.msg)
      }
      handlerGetListData()
      message.success('操作成功')
    })
  }
  const mapRows = ref([])

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    mapRows.value = selectedRowKeys
  }
  onMounted(() => {
    handlerGetListData()
  })
  const changeDel = (e, row) => {
    complaintOn({ complaint_id: row.complaint_id, is_on: e })
      .then((res) => {
        if (res.errorCode) {
          message.error(res.msg || '操作失败')
          return
        }
        message.success('操作成功！')
        handlerGetListData() // Refresh activity list after deletion
      })
      .catch((err) => {
        message.error(err.msg)
        row.is_on = !e
      })
  }

  const handleClose = () => {
    editDialogConfig.visible = false
  }
  const replyVisible = (row) => {
    feedbackAddEle.value.init(row)
  }
  const handerSearch = () => {
    pagination.current = 1
    handlerGetListData()
  }
  const handlerGetListData = (pram) => {
    listLoading.value = true
    adviceList({
      page: pagination.current,
      pageSize: pagination.pageSize
    }).then((res) => {
      pagination.total = res.total
      res.data.map(val=>val.replyTextarea='')
      listData.value.list = res.data
      listLoading.value = false
    })
  }
 
  const handlerHideDialog = () => {
    handlerGetListData()
    this.editDialogConfig.visible = false
  }
  const handlerDelete = (rowData) => {
    DelAdvices({ complaint_id: rowData.complaint_id }).then((res) => {
      if (res.errorCode) {
        message.error(res.msg || '删除失败')
        return
      }
      message.success('删除数据成功')
      handlerGetListData()
    })
  }
  const getRows = (props, event) => {
    debugger
  // console.log(props)
  props.onExpand(props.record, event)
}
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    handlerGetListData()
  }
</script>

<style scoped lang="less">
  .articleModal {
    z-index: 333 !important;
  }
  .dialog-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 24px;
    margin-bottom: 20px;
    .dialog-lable {
      width: 120px;
      text-align: right;
      margin-right: 20px;
    }
    .dialog-value {
      flex: 1;
    }
  }
  .user-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .user-info-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .expend-reply{
    display: flex;
    justify-content: flex-start;
    margin-left: 150px;
  }
  .reply-box{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 60%;
  }
  .reply-table{
    width: 60%;
    .reply-table-row{
      margin-bottom: 10px;
      border-bottom: 1px solid #f0f2f5;


    }
    .user-info-avatar{
      width: 30px;
      height: 30px;
    }
    .user-name{
      font-size: 12px;
    }
    .content{
      margin-left: 40px;
      padding-bottom: 10px;
    }
    .del-btn{
      margin-left: 10px;
    }
  }
</style>
